<template>
    <div class="put-create">
        <el-tabs v-model="activeName"  v-loading="pageLoading">
            <el-tab-pane label="新建触发" name="first">
                <div class="box-container">
                <!--左侧手机模拟框-->
                    <div class="container-left">
                        <div class="phone" :class="{'phone2':form.genreRadio=='2'}">
                            <div class="slide-banner" v-show="form.genreRadio=='1'">
                                <i class="clear-btn el-icon-circle-close float-right"></i>
                                <img :src="form.defaultSmallImg">
                            </div>
                            <div class="start-page" v-show="form.genreRadio=='2'">
                                <img :src="form.defaultBigImg">
                            </div>
                        </div>
                    </div>

                    <!--右侧内容-->
                    <div class="container-right">
                        <div class="right-content">
                            <div class="form-item-box clearfix">
								<div class="form-item-left ">规则名称：</div>
								<div class="form-item-right">
                                    <el-input class="input" v-model="form.rule_name" placeholder="请输入规则名称，最多支持10个字 " :maxlength="10"></el-input>
								</div>
							</div>

                            <div class="form-item-box clearfix">
                                <div class="form-item-left ">选择活动：</div>
                                <div class="form-item-right ">
                                    <el-input placeholder="请输入活动地址：(示例) http://" v-model="form.addActivityOwn" class="float-left item-input" v-show="form.addActivityselect==2"></el-input>
                                    <el-input placeholder="添加活动" style="width:43%;" v-model="form.addActivityName"  disabled class="float-left item-input" v-show="form.addActivityselect==1"></el-input>
                                    <el-button @click.native="openActivityTable" type="primary" class="float-left"  v-show="form.addActivityselect==1">选择活动</el-button>
                                    <el-select v-model="form.addActivityselect"  placeholder="选择活动" class="float-left item-select">
                                        <el-option label="活动列表" value="1"></el-option>
                                        <el-option label="自有活动" value="2"></el-option>
                                    </el-select>
                                </div>
                            </div>

                            <div class="form-item-box clearfix">
								<div class="form-item-left ">选择平台：</div>
								<div class="form-item-right">
                                    <el-checkbox v-model="form.iosCheck" :disabled="!iosPass">
                                        <i class="ios-icon sdkicon" :class="{'active-ios':iosPass}" ></i>
                                    </el-checkbox>
                                    <el-checkbox v-model="form.androidCheck" :disabled="!androidPass">
                                        <i class="android-icon sdkicon" :class="{'active-android':androidPass}" ></i>                   
                                    </el-checkbox>
								</div>
							</div>

                            <div class="form-item-box clearfix">
								<div class="form-item-left ">触发形式：</div>
								<div class="form-item-right">
                                    <el-radio class="radio" v-model="form.genreRadio" label="1">小图</el-radio>
                                    <el-radio class="radio" v-model="form.genreRadio" label="2">大图</el-radio>
                                    <el-radio class="radio" v-model="form.genreRadio" label="3">无图</el-radio>
								</div>
							</div>
                            
                            <!--上传小图-->
                            <div class="form-item-box clearfix clear-both" v-show="form.genreRadio==1">
                                <div class="form-item-left">投放图片:</div>
                                <div class="form-item-right add-banner">
                                    <span class="add-banner-btn" 
                                        v-show="!form.smallImg"
                                        @click="showUploadPicToast(1)">+</span>
                                    <img v-show="form.smallImg" :src="form.smallImg" />
                                    <i class="fa fa-times" 
                                    aria-hidden="true"
                                    v-show="form.smallImg"
                                    @click="cancelBanner(1)"></i>
                                    <p>1:1图片，支持GIF，PNG，JPG格式，小于200KB</p>
                                </div>
                            </div>

                            <!--上传大图-->
                            <div class="form-item-box clearfix clear-both"  v-show="form.genreRadio==2">
                                <div class="form-item-left">投放图片:</div>
                                <div class="form-item-right add-banner">
                                    <span class="add-banner-btn" 
                                        v-show="!form.bigImg"
                                        @click="showUploadPicToast(2)">+</span>
                                    <img v-show="form.bigImg" :src="form.bigImg" />
                                    <i class="fa fa-times" 
                                    aria-hidden="true"
                                    v-show="form.bigImg"
                                    @click="cancelBanner(2)"></i>
                                    <p>小于500 * 700像素，支持GIF，PNG，JPG格式，小于200KB</p>
                                </div>
                            </div>

                            <div class="form-item-box clearfix"  v-show="form.genreRadio==1">
								<div class="form-item-left ">悬浮时间：</div>
								<div class="form-item-right">
                                    <el-select v-model="form.float_type" placeholder="请选择">
                                        <el-option
                                        v-for="item in windOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <span v-show="form.float_type==2">
                                        <el-input placeholder="添加活动" style="width:30%; margin-right:10px;" v-model="form.float_time"  class="item-input" ></el-input>秒
                                    </span>
								</div>
							</div>

                            <div class="form-item-box clearfix">
                                <div class="form-item-left ">活动时间:</div>
                                <div class="form-item-right pick-date-box">
                                    <el-date-picker
                                    v-model="form.activityStartTime"
                                    type="datetime"
                                    :picker-options="pickerOptions"
                                    placeholder="选择开始时间" class="float-left">
                                    </el-date-picker><span class="separate-box float-left">至
                                    </span><el-date-picker
                                    v-model="form.activityEndTime"
                                    type="datetime"
                                    :picker-options="pickerOptions"
                                    placeholder="选择结束时间" class="float-left">
                                    </el-date-picker>
                                </div>
                            </div>

                             <div class="form-item-box clearfix">
                                <div class="form-item-left ">触发次数:</div>
                                <div class="form-item-right pick-date-box">
                                    <el-input placeholder="请输入次数" v-model="form.trg_num">
                                        <el-button slot="prepend" >每人可触发</el-button>
                                        <el-select v-model="form.trg_type" slot="append" placeholder="请选择">
                                        <el-option label="次/活动全程" value="1"></el-option>
                                        <el-option label="次/每日" value="2"></el-option>
                                        </el-select> 
                                    </el-input>
                                </div>
                            </div>


                            <div class="form-item-box clearfix">
                                <div class="form-item-left ">触发行为:</div>
                                <div class="form-item-right pick-date-box">
                                    <el-select v-model="form.actionValue" disabled placeholder="请选择">
                                        <el-option
                                        v-for="item in actionList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>


                            <div class="form-item-box clearfix clear-both">
                                <div class="form-item-left">触发条件:</div>
                                <div class="form-item-right touch-event">
                                    <!--<div class="touch-event-text">需要先<a class="cursor">创建条件</a>，判断SDK传入相应的字段是否符合</div>-->
                                    <div class="condition-builder-container">
                                        <table class="table">
                                            <tbody>
                                                <tr>
                                                    <td class="relation" @click="changeTrigger"><span :class="{'trigger-qie':form.triggerBool,'trigger-huo':!form.triggerBool}" v-text="form.triggerBool?'且':'或'"></span></td>
                                                    <td class="condition">
                                                        <div class="input-group" v-for="(tgr,tgrIndex) in triggerList">
                                                            <el-select v-model="tgr.alias" class="input-item" placeholder="请选择">
                                                                <el-option
                                                                v-for="item in triggerOptions1"
                                                                :key="item.value"
                                                                :label="item.label"
                                                                :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                            <el-select v-model="tgr.condition" class="input-item" placeholder="请选择">
                                                                <el-option
                                                                v-for="item in triggerOptions2"
                                                                :key="item.value"
                                                                :label="item.label"
                                                                :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                            <el-input v-model="tgr.inputValue" class="input-item" placeholder="请输入内容"></el-input>
                                                            <span class="el-icon-delete delete cursor"  @click="removeCondition(tgrIndex)"></span>
                                                        </div>
                                                    </td>
                                                    <td class="add-group cursor" @click="addCondition">
                                                        <span class="el-icon-plus "></span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div> 
                                </div>
                            </div> 


                            <div class="form-item-box sub-btn text-center">
								 <el-button class="btn-bg" type="primary" @click="addTriggers">保存</el-button>
							</div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 上传图片弹框 -->
		
        <el-dialog title="上传图片" :visible.sync="uploadPicBox" size="small" >
            <div class="upload-body clear-both"   v-loading="imgUpLoading">
                <ul class="clearfix upload-img-list">
                    <li>
                    <input type="file"   @change='addImgEvent' accept="image/png, image/jpeg, image/jpg">
                    </li>
                    <!--<li v-for="(item, index) in uploadPicList"
                        @click="chooseBannerImg(index)"
                        :class="{'border-red': currentBannerIndex===index}"
                        :style="{'background-image': 'url('+item.src+')'}"></li>-->
                </ul>
            </div> 
            <div class="add-prize-footer text-center">
                <div class="page-num ">
                    <el-pagination
                        small
                        layout="prev, pager, next"
                        @current-change="pageChange"
                        :total="updateImgtotal">
                    </el-pagination>
                </div>
                <div class="page-num ">
                    <el-button @click="hideUploadPicToast">取消</el-button>
                    <el-button type="primary" @click="comfirmBannerImg">确定</el-button>
                </div>
            </div>
        </el-dialog> 
        
        <el-dialog
        title="提示"
        :visible.sync="activityDialog"
        size="small"
        class="table-small"
        >
        
            <el-table
                :data="tableData"
                stripe
                style="width: 100%">
                <el-table-column prop="name" label="活动名称"> </el-table-column>
                <!--<el-table-column prop="name" label="类型"> </el-table-column>-->
                <el-table-column prop="startTime" label="开始时间 "> </el-table-column>
                <el-table-column prop="endTime" label="结束时间 " >  </el-table-column>
                </el-table-column>
                <el-table-column prop="address" label="操作 " width="120" >
                    <template slot-scope="scope">
                        <el-button @click="selectClick(scope.row)" type="text" size="small">选取</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
                <el-button @click="activityDialog = false">取 消</el-button>
                <el-button type="primary" @click="activityDialog = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
	import * as api from './../api/api';
    import Vue from 'vue';
export default {
    data(){
        return {
            imgUpLoading:false,
            pageLoading:false, 
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            activeName: 'first',
            iosPass:true,
            androidPass:true,
            form:{
                rule_name:'',
                iosCheck:false,
                androidCheck:false,
                genreRadio:'1',
                defaultSmallImg:require('./../assets/img/trigger_icon2.png'),  //小图
                defaultBigImg:require('./../assets/img/trigger_icon_big.png'), //大图
                smallImg:'',  //小图
                bigImg:'', //大图
                float_type:'1',  //悬浮时间
                float_time:'15',  //时间
                trg_type:'1', //触发次数类型
                trg_num:'', //触发次数
                actionValue:'1', //触发行为  登录
                //添加活动
                activityStartTime:'',//触发开始时间
                activityEndTime:'',//触发结束时间
                addActivityName: '',//规则名称
                addActivityselect: '1',//自有活动or列表活动
                addActivityOwn:'', //选择自有活动名称
                addActivityList:'', //选择列表活动名称
                act_id:'',  //活动id
                triggerBool:false, //且&或
            },
            triggerList:[
                {
                    alias:'', //参数别名
                    condition:'',//条件
                    inputValue:'', //用户输入条件        
                }
            ],

            windOptions:[{
                value: '1',
                label: '一直存在'
                },{
                value: '2',
                label: '定时消失'
            }],
            actionList:[{
                value: '1',
                label: '登录'
                }],
            triggerOptions1:[{
                value: 'user',
                label: '用户来源'
                },{
                value: 'time',
                label: '注册时间'
                },{
                value: 'score',
                label: '积分数量'
                },{
                value: 'talk',
                label: '评论数量'
                },{
                value: 'login',
                label: '登陆次数'
                }],
            triggerOptions2:[{
                value: '=',
                label: '等于'
                }, {
                value: '!=',
                label: '不等于'
                },{
                value: '>',
                label: '大于'
                },{
                value: '>=',
                label: '大于等于'
                },{
                value: '<',
                label: '小于'
                },{
                value: '<=',
                label: '小于等于'
                }],
            uploadPicBox: false,//上传图片弹出框
            clickUpLoadImg:null,  //当前点击的上传框
            activityDialog:false,  //活动列表Show
            tableData: [],  //活动列表

            //上传图片分页
            updateImgcurrent_page:1, //当前页码
            updateImglast_page:'',//最后一页
            updateImglimit:10, //一页显示多少条
            updateImgtotal:1, //总条数
        }
    },
    watch:{
        'form.smallImg'(a,b){
            if(a==''){
                this.form.defaultSmallImg=require('./../assets/img/trigger_icon2.png')
            }
        },
        'form.bigImg'(a,b){
            if(a==''){
                this.form.defaultBigImg=require('./../assets/img/trigger_icon_big.png')
            }
        },
    },
    mounted(){
        this.getPutActivityList();
    },
    methods: {
        //新建触发
        addTriggers(){
            let vm = this;
            
            if(vm.trgReg()&&vm.detailReg()){
                vm.pageLoading=true;
                let act_type,act_name,act_id;
                if(vm.form.addActivityselect==1){
                    act_type=1;
                    act_id=vm.form.act_id;
                    act_name=vm.form.addActivityName;
                }else {
                    act_type=2;
                    act_name=vm.form.addActivityOwn;
                }
                //选择平台
                let platform=[];
                if(vm.form.iosCheck){
                    platform.push(0)
                }
                if(vm.form.androidCheck){
                    platform.push(1)
                }
                
                let body={
                    id:vm.$route.query.trgNo,
                    act_type:act_type,
                    act_name:act_name,
                    act_id:act_id,
                    platform:platform,//平台
                    rule_name:vm.form.rule_name,  //名称
                    show_img:vm.form.genreRadio,    //触发类型
                    float_type:vm.form.float_type,   //悬浮类型
                    begin_time:vm.timeDateMinutes(vm.form.activityStartTime),
                    end_time:vm.timeDateMinutes(vm.form.activityEndTime),
                    trigger_times:vm.form.trg_num,
                    trigger_times_unit:vm.form.trg_type,
                    trigger_condition:vm.triggerList
                };
               vm.form.triggerBool?body.triggerBool='and':body.triggerBool='or';

                if(vm.form.float_type==2){
                    body.float_time=vm.form.float_time;  //悬浮时间
                }
                if(vm.form.genreRadio==1){
                    body.small_img=vm.form.smallImg;  //小图
                }else if(vm.form.genreRadio==2){
                    body.big_img=vm.form.bigImg;  //大图
                }
                api.modifyTrigger(body).then(res=>{
                    vm.pageLoading=false;   
                    if(res.data.code==0){
                        vm.$router.push({name:'triggers'});
                    }
                }).catch(err=>{
                    vm.pageLoading=false;
                });
            }
            
        },
        //验证
        trgReg(){
            let reg=/^(https|http|ftp|rtsp|mms):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/;
            if(this.form.rule_name==''){
                this.$message({showClose: true,message: '规则名称不能为空'});	
                return false;
            }else if(this.form.addActivityselect==1&&!this.form.act_id){
                this.$message({showClose: true,message: '请选择活动'});
                return false;
            }else if(this.form.addActivityselect==2&&!reg.test(this.form.addActivityOwn)){
                this.$message({showClose: true,message: '请输入正确自有活动链接'});
                return false;
            }else if(!this.form.iosCheck&&!this.form.androidCheck){
                this.$message({showClose: true,message: '请选择平台'});	
                return false;
            }else if(this.form.genreRadio==1&&this.form.smallImg==''){
                this.$message({showClose: true,message: '请上传图片'});	
                return false;
            }else if(this.form.genreRadio==2&&this.form.bigImg==''){
                this.$message({showClose: true,message: '请上传图片'});	
                return false;
            }else if(this.form.float_type=='2'&&this.form.float_time==''){
                this.$message({showClose: true,message: '请输入悬浮时间'});	
                return false;
            }else if(!this.form.activityStartTime){
                this.$message({showClose: true,message: '请选择开始时间'});
                return false;
            }else if(!this.form.activityEndTime){
                this.$message({showClose: true,message: '请选择结束时间'});
                return false;
            }else if(this.form.trg_num==''){
                this.$message({showClose: true,message: '请输入次数'});
                return false;
            }else{
                return true;
            }
        },
        //触发条件验证
        detailReg(){
            let vm = this;
            let flag;
            vm.triggerList.forEach((list,a)=>{
                if(list.alias==''){
                    vm.$message({showClose: true,message: '触发条件不能为空'});	
                    return flag=false;
                }else if(list.condition==''){
                    vm.$message({showClose: true,message: '触发条件不能为空'});	
                    return flag=false; 
                }else if(list.inputValue==''){
                    vm.$message({showClose: true,message: '触发条件不能为空'});	
                    return flag=false;    
                }else{
                    return flag=true; 
                }
            })
            return flag;
        },
        //获得活动列表
        getPutActivityList(){
            let vm = this;
            let body={

            };
            api.getPutActivityList(body).then(res=>{
                vm.tableData=res.data.data.base;
            });
        },
        //或且
        changeTrigger(){
            this.form.triggerBool=!this.form.triggerBool;      
        },
        //添加触发条件
        addCondition(index){
            this.triggerList.push({ 
                alias:'', //参数别名
                condition:'',//条件
                inputValue:'', //用户输入条件        
            });
        },
        //删除触发条件
        removeCondition(index){
            if(this.triggerList.length>1){
                Vue.delete(this.triggerList, index);
            }else{
                this.$message({
                    showClose: true,
                    message: '至少保留一个条件'
                });
            }
        },

        //打开活动table
        openActivityTable(index){
            this.activityDialog=true;
        },
        //选择活动
        selectClick(item){
            this.form.act_id=item.id;
            this.form.addActivityName=item.name;
            this.activityDialog=false;
        },
        //打开上传图片弹出框
        showUploadPicToast(val){
            this.clickUpLoadImg=val;
            this.uploadPicBox = true;
        },
        //删除上传的图片
        cancelBanner(index){
            if(index==1){
                this.form.smallImg='';
            }else{
                this.form.bigImg='';
            }
        },
        //隐藏上传图片弹出框
        hideUploadPicToast(){
            this.uploadPicBox = false;
            this.currentBannerIndex = -1;
        },
        //确认上传图片
        comfirmBannerImg(){
            var curIndex = this.currentBannerIndex;
            if (curIndex === -1) {
                this.$message({
                    showClose: true,
                    message: '请先选择图片'
                });
            } 
        },
        //上传图片分页 点击当前的页数
        pageChange(a){
            this.updateImgcurrent_page=a;
        },
        //上传图片
        addImgEvent(event){
            var that = this;
            that.imgUpLoading=true;
            var img1 = event.target.files[0];
            //生成临时图片路径
            var temSrc = URL.createObjectURL(img1);
            //判断图片尺寸大小
            var size = img1.size/1024;
            //小于200k
            if(that.clickUpLoadImg==1){
                if(size>200){
                    that.$message({
                    showClose: true,
                    type: 'error',
                    message: '图片大小不能大于200KB'
                    }); 
                    return false;  
                }
            }else{
                if(size>200){
                    that.$message({
                    showClose: true,
                    type: 'error',
                    message: '图片大小不能大于200KB'
                    }); 
                    return false;  
                }
            }
            
            //判断图片像素尺寸
            var _img = new Image();
            _img.onload = function  () {
                var imgWidth = _img.width,
                    imgHeight = _img.height;
                if (that.clickUpLoadImg === 1) {
                    if (imgWidth!=imgHeight) {
                        that.$message({
                            showClose: true,
                            type: 'error',
                            message: '请上传尺寸为1:1的图片'
                        }); 
                        return false;
                    };
                    // that.form.bannerImg = temSrc;
                    //上传图片
                    let formdata = new FormData();
                    formdata.append('upfile', img1);
                    api.uploadPrizeImg(formdata).then(res => {
                        that.hideUploadPicToast();
                        that.imgUpLoading=false;
                        that.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        that.form.defaultSmallImg = res.data.result;
                        that.form.smallImg = res.data.result;
                    }).catch(err=>{
                        that.imgUpLoading=false;
                        that.httpStatusCode(err);
                        that.hideUploadPicToast();
                    })  
                }else{
                    if (imgWidth>500||imgHeight>700) {
                        that.$message({
                            showClose: true,
                            type: 'error',
                            message: '请上传500 * 700像素的图片'
                        }); 
                        return false;
                    };
                    // that.form.bannerImg = temSrc;
                    //上传图片
                    let formdata = new FormData();
                    formdata.append('upfile', img1);
                    api.uploadPrizeImg(formdata).then(res => {
                        that.hideUploadPicToast();
                        that.imgUpLoading=false;
                        that.$message({
                            message: '上传成功',
                            type: 'success'
                        });
                        that.form.defaultBigImg = res.data.result;
                        that.form.bigImg = res.data.result;
                    }).catch(err=>{
                        that.imgUpLoading=false;
                        that.httpStatusCode(err);
                        that.hideUploadPicToast();
                    })  
                }
                
                
                setTimeout(function  () {
                    URL.revokeObjectURL(temSrc);
                },100);
            }
            _img.src = temSrc;
            event.target.value='';
        },
        //根据id获得触发详情
        fetchTrg(val){
            let vm =this;
            vm.pageLoading=true;
            let body={
                id:val
            };
            api.editActivityTrigger(body).then(res=>{
                vm.pageLoading=false;
                if(res.data.code==0){
                    vm.pageLoading=false;
                    vm.form.rule_name=res.data.data.rule_name;
                    vm.form.addActivityselect=res.data.data.act_type.toString();
                    if(res.data.data.act_type==1){
                        vm.form.act_id=res.data.data.act_id;
                        vm.form.addActivityName=res.data.data.act_name;
                    }else{
                        vm.form.addActivityOwn=res.data.data.act_name;  
                    }
                    JSON.parse(res.data.data.platform).forEach((a,b)=>{
                        if(a==1){
                            vm.form.androidCheck=true;  
                        }else if(a==0){
                            vm.form.iosCheck=true; 
                        }
                    }); 
                    vm.form.genreRadio=res.data.data.show_img;//触发类型
                    if(res.data.data.show_img==1){
                        vm.form.smallImg=res.data.data.small_img;//触发类型
                        vm.form.defaultSmallImg=res.data.data.small_img;//触发类型
                    }else if(res.data.data.show_img==2){
                        vm.form.bigImg=res.data.data.big_img;//触发类型
                        vm.form.defaultBigImg=res.data.data.big_img;//触发类型
                    }
                    vm.form.float_type=res.data.data.float_type.toString();
                    if(res.data.data.float_type==2){
                        vm.form.float_time=res.data.data.float_time  //悬浮时间
                    }

                    //时间
                    vm.form.activityStartTime=new Date(res.data.data.begin_time*1000);
                    vm.form.activityEndTime=new Date(res.data.data.end_time*1000);
                    //触发次数
                    vm.form.trg_type=res.data.data.trigger_times_unit.toString();
                    vm.form.trg_num=res.data.data.trigger_times;
                    
                    //触发条件
                    let triggerList=JSON.parse(res.data.data.trigger_condition);
                    triggerList.triggerBool=='and'?vm.form.triggerBool=true:vm.form.triggerBool=false;
                    vm.triggerList=triggerList.trigger;

                }
            });
        },

    },
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => {
            if(vm.$route.query.trgNo){
                vm.form.activityNo=vm.$route.query.trgNo;
                vm.fetchTrg(vm.$route.query.trgNo);
            }else{
                vm.$router.go(-1);
            }
        })
    },
    
}
</script>
<style lang="less">
    .put-create{
        .pick-date-box .el-input__inner{
            height: 34px;
            box-sizing: border-box;
            border-radius: 0;
            background-color: #f4f8fb;
            color: #888;
            border: 1px solid #efefef;
            box-shadow: none;
            font-size: 12px;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            box-sizing: border-box;
        }
        .el-select .el-input {
            width: 140px;
        }
        .input-group{
            .input-item{
                width:30%; 
                .el-input{
                    width:100%;  
                }
            }
            .delete{
                display:inline-block;
                width:10%;
                font-size:17px;
                color:#ec5463;
            }
        }
    }
</style>
<style lang="less" scoped>
.put-create{
    height:100%;
    width:100%;
    overflow-y:auto;
    background:#fff;
    padding:40px;
    .box-container{
        width: 100%;
        height: auto;
        min-height: 600px;
        position: relative;
        .container-left{
            width: 300px;
            height: auto;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            padding-left: 15px;
            padding-top: 30px;
            .phone{
                width: 268px;
                height: 501px;
                background: url(../assets/img/phone-model.png) no-repeat;
                background-size: 100%;
                position: relative;  
            }
            img{
                width: 64px;
                height: 64px;
                margin-top:15px;
            }
            .slide-banner{
                width: 80px;
                height: 80px;
                overflow: hidden;
                position: absolute;
                left: 185px;
                bottom: 80px;
                margin: auto;
            }
            .start-page img{
                width: 100%;
                width:75%;
                height: auto;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            .information-banner{
                width: 128px;
                height: 96px;
                overflow: hidden;
                background-color: #ccc;
                position: absolute;
                top: 130px;
                left: 6px;
            }
        }
        .container-right{
            width: 100%;
            height: auto;
            padding-left: 300px;
            .right-content{
                min-height: 600px;
                border-left: 1px solid #efefef;
                padding-left: 20px;
                .sub-btn{
                    margin:20px 0;
                    .btn-bg{
                        width:150px;
                    }
                }
                .form-item-box{
                    margin-bottom: 15px;
                    font-size: 12px;
                    
                    .form-item-left{
                        float: left;
                        line-height: 34px;
                        color:#666666;
                        width:88px;
                        box-sizing: border-box;
                    }
                    .form-item-right{
                        float: left;
                        width: 430px;
                        min-height: 34px;
                        line-height:34px;
                        .item-input{
                            width:290px;
                        }
                        
                        .to-position{
                            color:#ec5463;
                        }
                        .sdkicon {
                            margin-bottom: -3px;
                            display:inline-block;
                            background-size: 128px 64px;
                        }
                        .separate-box{ 
                            display:inline-block;
                            padding: 6px 12px;
                        }
                        .ios-icon{
                            width: 38px;
                            height: 16px;
                            background-position: -1px -35px;   
                            background-image: url(../assets/img/sdkicon2.png);        
                        }
                        .active-ios{
                            background-position:  -202px -1px;   
                            background-image: url(../assets/img/sdkicon2.png);  
                        }
                        .android-icon{
                            width: 73px;
                            height: 16px;
                            background-position: -1px -18px; 
                            background-size: 128px 64px;
                            background-image: url(../assets/img/sdkicon2.png); 
                        }
                        .active-android{
                            background-position: -1px -1px; 
                            background-image: url(../assets/img/sdkicon2.png); 
                        }
                        
                    }
                    .touch-event{
                        .touch-event-text{
                            color:#666;
                            a{
                                color:#ec5463;
                            }
                        }   
                        .condition-builder-container{
                            width: 100%;
                            overflow: auto;
                            .table{
                                min-width: 400px;
                                width: auto;
                                margin-bottom: 0;
                                border: 1px solid #ddd;
                                td{
                                    border: 1px solid #ddd;
                                }
                                .relation{
                                    vertical-align: middle;
                                    text-align: center;
                                    max-width: 20px;
                                    min-width: 20px;
                                    width: 20px;
                                    padding: 0;
                                    font-weight: 700;  
                                    &:hover{
                                        cursor: pointer;
                                    } 
                                    .trigger-qie{
                                        color:#5bc0de;
                                    }
                                    .trigger-huo{
                                        color:#3cb371;
                                    }
                                }
                                .condition{
                                    vertical-align: middle;
                                    text-align: center;
                                    min-width: 300px;
                                    padding: 0 5px;
                                    .input-group{
                                        margin-top: 5px;
                                        margin-bottom: 5px;
                                        display: table;
                                        border-collapse: separate;
                                        position: relative;
                                        .input-item{
                                            .el-input{
                                              width:30%;  
                                            }
                                        }
                                    }
                                }
                                .add-group{
                                    width:20px;
                                    .el-icon-plus{
                                        font-size:18px;
                                        color:#ec5463;
                                    }
                                }
                            }
                        }
                    }
                    .form-item-right .input{
                        background-color: #f4f8fb;
                        color: #888;
                        box-shadow: none;
                        font-size: 12px;
                        width: 100%;
                        height: 34px;
                        box-sizing: border-box;
                    }
                    .more-site-list{
                        float: left;
                        width: 414px;
                        max-height:105px !important;
                        max-height:65px !important;
                        overflow-y:auto;
                        .radio{
                            width:170px;
                            margin-top:10px;
                        }
                        &::-webkit-scrollbar {/*滚动条整体样式*/
                                width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                                height: 1px;
                        }
                        &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                                border-radius: 10px;
                                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                                background: #293E51;
                        }
                        &::-webkit-scrollbar-track {/*滚动条里面轨道*/
                                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                                border-radius: 10px;
                                background: #EDEDED;
                        }
                    }

                }
                .clearfix:after{
                    content:'';
                    display: block;
                    height: 0;
                    clear:both;
                }
                .activity-list{
                    width:600px;
                    height:auto;
                    border:1px solid #efefef;
                    padding-left:20px;
                    position:relative;
                    .add-btn{
                        position:absolute;
                        top:4px;
                        right:10px;
                        z-index:5;
                    }
                }
            }
        }
    }

    .upload-body{
        padding: 15px;   
    }
    .upload-img-list li{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px 20px;
        text-align: center;
        font-size: 30px;
        float: left;
        color: #aaaaaa;
    }
    .upload-img-list li:first-child{
        position: relative;
    }
    .upload-img-list li:first-child:before{
        content:'+';
    }
    .upload-img-list li input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list li:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .add-prize-footer{
        width:100%;
        .page-num{
            
            display:inline-block;
        }
    }
    

    .add-banner{
        height: 100px;
        .add-banner-btn{
            width: 60px;
            height: 60px;
            line-height: 52px;
            font-size: 30px;
            font-weight: 100;
            color: #888;
            border-color: #efefef;
            border: 1px solid #efefef;
            display: inline-block;
            text-align: center;
            background-color: #f4f8fb;
            cursor:pointer;
        }
        .fa-times{
            position: relative;
            top: -30px;
            font-size: 14px;
            color:#888888;
            cursor: pointer;
            &:hover{
                opacity: 0.8;
            }
        }
        img{
            height: 60px;
        }
        p{
            color: #999999;
            padding-top: 5px;
            font-size: 12px;
        }
    }

}

</style>
